<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>刘栋的毕业设计</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">

    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css' type='text/css' />
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #menu {
            position: absolute;
            background: #fff;
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
        }
        .calculation-box {
            height: 75px;
            width: 150px;
            position: absolute;
            bottom: 40px;
            left: 10px;
            background-color: rgba(255, 255, 255, .9);
            padding: 15px;
            text-align: center;
        }

        p {
            font-family: 'Open Sans';
            margin: 0;
            font-size: 13px;
        }
    </style>
</head>
<body>

<div id='map'></div>

<div id='menu' class="collapse in">
    <input id='cjw4brw9q0o1e1bo20j4f25dd' type='radio' name='rtoggle' value='streets' >
    <label for='streets'>道路</label>
    <input id='cjwm2e6f103p21bqr51ww0cmp' type='radio' name='rtoggle' value='light'checked='checked>
    <label for='light-3D'>3D</label>
    <input id='cjurvek2p2zq61gqwi21czxof' type='radio' name='rtoggle' value='dark'>
    <label for='dark'>黑夜</label>
    <input id='cjwhtllna00u71dt3jrkyl32a' type='radio' name='rtoggle' value='outdoors'checked='checked>
    <label for='outdoors'>交通</label>
    <input id='cjw1rmew30lgw1druariza3lz' type='radio' name='rtoggle' value='satellite'>
    <label for='satellite'>卫星</label>
</div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmxvd2QiLCJhIjoiY2p1NnRxZDZoMW4ydjN5cGcyam1zcGwxMSJ9.GBoYAJ5rHZIPnuvS9Ty_vg';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/flowd/cjwhtllna00u71dt3jrkyl32a',
        center: [108.94, 34.26],
        zoom: 15.0,
        hash:true,
        pitch: 45,
        dragPan:true,
        dragRotate:true
    });

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setStyle('mapbox://styles/flowd/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }


    map.on('load', function() {
// Insert the layer beneath any symbol layer.
        var layers = map.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                labelLayerId = layers[i].id;
                break;
            }
        }

        map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',

// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
                'fill-extrusion-height': [
                    "interpolate", ["linear"], ["zoom"],
                    15, 0,
                    15.05, ["get", "height"]
                ],
                'fill-extrusion-base': [
                    "interpolate", ["linear"], ["zoom"],
                    15, 0,
                    15.05, ["get", "min_height"]
                ],
                'fill-extrusion-opacity': .6
            }
        }, labelLayerId);
    });

    map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        },
        trackUserLocation: true
    }),'bottom-right');

//huatu
    var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
    map.addControl(draw,'bottom-right');
    map.on('draw.create', updateArea);
    map.on('draw.delete', updateArea);
    map.on('draw.update', updateArea);

    function updateArea(e) {
        var data = draw.getAll();
       // var answer = document.getElementById('calculated-area');
        if (data.features.length > 0) {
            var area = turf.area(data);
// restrict to area to 2 decimal points
            var rounded_area = Math.round(area*100)/100;
            //answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>平方米</p>';
            alert('面积是'+rounded_area+"平方米");
        } else {
            answer.innerHTML = '';
            if (e.type !== 'draw.delete') alert("面积测量");
        }
    }

    //fangx
    map.addControl(new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        unit: 'metric',
       interactive:false
        //true
    }),'bottom-left');
</script>

</body>
</html>